<template>
  <div>
    <div style="display: flex;justify-content: space-between">
      <div>
        <span style="font-size: 25px;font-weight: bolder">{{ $t('today') }}</span>
        <span style="font-size: 13px;">{{ year }} / {{ month }} / {{ date }} {{ $t('week') }}:{{ week }}</span>
        <div v-if="netModel !=='local' && language === 'zh'">
          <iframe
            style="height: 25px"
            name="fancybox-frame1587465464443"
            frameborder="0"
            scrolling="no"
            hspace="0"
            src="http://i.tianqi.com/index.php?c=code&a=getcode&id=34&h=25&w=280"
          />
        </div>
      </div>
      <div style="width: 700px" class="flex mt-2">
        <div v-for="(item,index) in statusCountList" :key="index" class="flex-grow">
          <div class="text-center text-xl primary-color">{{ item.count }}</div>
          <div class="text-gray-500 text-center text-base">{{ item.title }}</div>
        </div>
      </div>
    </div>
    <el-row :gutter="10">
      <product class="item"/>
      <notice class="item"/>
      <solar-count v-if="haveSolar" class="item"/>
      <iot-count-minute class="item"/>
      <!--      <device-num-map class="item" />-->
      <video-resource class="item"/>
    </el-row>
  </div>
</template>
<script>
import { productDeviceNum, statusDeviceNum, warnCountDeviceNum } from '@/api/iot/iotDeviceBelongApi'
import { getLanguage, getNetModel } from '@/util/storage'
import Notice from './components/Notice'
import IotCountMinute from './components/IotCountMinute'
import VideoResource from './components/VideoResource'
import Product from './components/Product'
import SolarCount from './components/SolarCount'

import DeviceNumMap from './components/DeviceNumMap'
import resize from '@/components/Mixins/resize'

export default {
  name: 'Dashboard1',
  components: {
    Notice,
    IotCountMinute,
    VideoResource,
    Product,
    DeviceNumMap,
    SolarCount
  },
  mixins: [resize],
  data() {
    return {
      statusCountList: [],
      year: '',
      month: '',
      date: '',
      week: '',
      haveSolar: false,
      netModel: getNetModel(),
      language:getLanguage()
    }
  },
  created() {
    const date = new Date()
    this.year = date.getFullYear()
    this.month = date.getMonth() + 1
    this.date = date.getDate()
    this.week = '7123456'.charAt(date.getDay())
    this.statusDeviceNum()
    this.productDeviceNum()
  },
  methods: {
    productDeviceNum() {
      productDeviceNum(null).then(res => {
        if (res.code === '200') {
          res.data.forEach(product => {
            if (product.keyName === 'solarController') {
              this.haveSolar = true
            }
          })
        }
      })
    },
    statusDeviceNum() {
      statusDeviceNum({}).then(res => {
        const { data, code } = res
        if (code === '200') {
          const statusCountList = []
          for (const item of data) {
            let color
            switch (item.status) {
              case 'ONLINE':
                color = '#67c23a'
                break
              case 'OFFLINE':
                color = '#909399'
                break
              default:
                color = '#409eff'
            }
            statusCountList.push({
              title: this.$t(item.status),
              color: color,
              count: item.num
            })
          }
          this.statusCountList = statusCountList
          this.warnCountDeviceNum()
        }
      })
    },
    warnCountDeviceNum() {
      warnCountDeviceNum({}).then(res => {
        const { data, code } = res
        if (code === '200') {
          let count = 0
          data.forEach(item => {
            if (item.warnNum > 0) {
              count = count + item.num
            }
          })
          this.statusCountList.push({
            title: this.$t('warn'),
            color: '#f57298',
            count: count
          })
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">

@import '@/styles/element-variables.scss';

.primary-color {
  color: $--color-primary;
}

.item {
  margin-top: 8px;
}
</style>

